<script setup lang="ts">
// 日期范围选择 用与精准人群推广、商品运营、活动场景、内容营销...
import dayjs, {Dayjs} from 'dayjs';
import {WxtUtils} from "~/contentScripts/views/wxt/lib/wxtUtils";

const props = defineProps({
  value: {
    type: Array,
    default: () => []
  },
  placement: {
    type: String,
    default: 'bottom'
  },
  hasToday: {
    type: Boolean,
    default: true,
  }
});
const emit = defineEmits(['update:value', 'change']);
const dates = ref<any[]>([]);
const change = () => {
  nextTick(() => {
    emit('update:value', dates.value);
    emit('change', dates.value);
  })
}
const init = () => {
  if (props.value.length === 2) {
    dates.value = props.value;
  } else {
    // 默认为90天
    dates.value = [dayjs().subtract(89, 'days'), dayjs()];
  }
}
const presets = [
  ...(props.hasToday ? [{
    label: '今天',
    value: [dayjs(), dayjs()]
  }] : []),
  {
    label: '昨天',
    value: [dayjs().subtract(1, 'days'), dayjs().subtract(1, 'days')]
  },
  {
    label: '过去7天',
    value: [dayjs().subtract(6, 'days'), dayjs()]
  },
  {
    label: '过去14天',
    value: [dayjs().subtract(13, 'days'), dayjs()]
  },
  {
    label: '过去30天',
    value: [dayjs().subtract(29, 'days'), dayjs()]
  },
  {
    label: '过去90天',
    value: [dayjs().subtract(89, 'days'), dayjs()]
  },
];
const disabledDate = (current: Dayjs) => {
  // 不能选择未来时间
  return current && current.isAfter(dayjs(), 'day');
}
watch(() => dates.value, (val) => {
  if (val.length == 2) {
    nextTick(() => change());
  }
}, {
  deep: true
})
init();
</script>

<template>

  <!--  :presets="[-->
  <!--  { label: '今天', value:[dayjs(), dayjs()] },-->
  <!--  { label: '昨天', value:[dayjs().subtract(1, 'days'), dayjs().subtract(1, 'days')] },-->
  <!--  { label: '过去7天', value:[dayjs().subtract(6, 'days'), dayjs()] },-->
  <!--  { label: '过去14天', value:[dayjs().subtract(13, 'days'), dayjs()] },-->
  <!--  { label: '过去30天', value:[dayjs().subtract(29, 'days'), dayjs()] },-->
  <!--  { label: '过去90天', value:[dayjs().subtract(89, 'days'), dayjs()] },-->
  <!--  ]"-->
  <a-range-picker style="width: 234px;" size="small" v-model:value="dates" :placeholder="'请选择时间范围'"
                  :disabledDate="disabledDate"
                  :show-time="false" :presets="presets"
  >
  </a-range-picker>
</template>

<style scoped>

</style>
